<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>简单的垂直导航栏</title>
	<style type="text/css">
    *{margin: 0;padding: 0;font-size: 16px;}
    ul{list-style: none;width: 100px;}
    a{
    	background-color: #005CAF;
    	color: #F4A7B9;
    	text-indent: 10px;
    	height: 30px;
    	line-height: 30px;
    	width: 100px;
    	display: block;/*重要点，设置为块级元素，这样可以直接对a设置样式，而不用对li设置。*/
    	margin-bottom: 10px;
    	text-decoration: none;
    }
    a:hover{
    	background-color: #FFC408;
    	color: green;
    }
	</style>
</head>
<body>
	<ul>
		<li><a href="#">首页</a></li>
		<li><a href="#">新闻</a></li>
		<li><a href="#">博客</a></li>
		<li><a href="#">照片</a></li>
		<li><a href="#">留言</a></li>

	</ul>
</body>
</html>